<template>
	<view class="indexContainer">
		<!--头部-->
		<view class="header">
			<image src="../../static/images/logo.png"></image>
			<view class="searchInput">
				<i class="iconfont icon-sousuo"></i>
				<input type="text" placeholder="搜索商品" placeholder-class="placeholder" />
			</view>
			<button>登录</button>
		</view>
		<!--导航菜单-->
		<scroll-view class="navScroll" enable-flex scroll-x >
			<view class="navItem" :class="{active:navId===-1}" @click="navId=-1" >推荐</view>
			<view class="navItem" @click="navId=item.L1Id" :class="{active:navId===item.L1Id}" v-for="(item,index) in initData.kingKongModule.kingKongList" :key="item.L1Id">{{item.text}}</view>
		</scroll-view>
		<!--轮播图-->
		<scroll-view class="scrollContainer" scroll-y>
					<recommend v-if="navId===-1" />
					<cateList :navIndex="navId" v-if="navId!==-1" />
		</scroll-view>
	</view>
	
</template>

<script>
	import recommend from '../../components/recommend/recommend.vue'
	import {mapActions,mapState,mapGetters} from 'vuex'
	import cateList from '../../components/cateList/cateList.vue'
export default {	
	data() {
		return {
			navId:-1 
		}
	},
	components:{
		recommend,
		cateList
	},
	computed:{
		...mapState({
			initData:state=>state.indexData.initData
		}),
		...mapGetters(['kingKongList'])
	},
	mounted(){
		this.getIndexData()
	},
	methods:{
		...mapActions(['getIndexData'])
	}
};
</script>

<style lang="stylus">
.indexContainer
	.header
		display flex
		padding 10upx 0
		image
			width 140rpx
			height 40rpx
			margin 10rpx 20rpx
		.searchInput
			height 60rpx
			background-color #eee
			position relative
			input
				margin-left 50rpx
				height 60rpx
			.iconfont
				font-size 30rpx
				position absolute
				left 10rpx
				top:25%
			.placeholder
				font-size 26rpx
				text-align center
		button
			width 144rpx
			height 60rpx
			line-height 60rpx
			text-align center
			font-size 24rpx
			color #b4282d
			margin 0 20rpx
	.navScroll
		display flex
		white-space nowrap
		height 80rpx
		.navItem
			width 200rpx
			height 100%
			display inline-block
			margin 0 20rpx
			padding 0 20rpx
			text-align center
			line-height 80rpx
			font-size 28rpx
			box-sizing border-box
			&.active
				border-bottom 1rpx solid red
	.scrollContainer
		margin-top 10rpx
</style>
